import React from 'react';
import { observer } from 'mobx-react';
import { WeaColorPicker,WeaLocaleProvider } from 'ecCom';
import './tagset.less';
const getLabel = WeaLocaleProvider.getLabel;
export interface TagSetProps {
    color:string;
    bgcolor:string;
    bdcolor:string;
    onChange:Function;
}

@observer
class TagSet extends React.Component<TagSetProps, any>{
    constructor(props){
        super(props);
    }
    tagClick = (obj) => {
        // const { form } = this.props;
        // form.$('tag').bind().onChange(obj.tag);
        // this.setState({visible:false})
    }

    colorChange = (v) => { this.props.onChange({color:v}) }
    bdColorChange = (v) => { this.props.onChange({bdcolor:v}) }
    bgColorChange = (v) => { this.props.onChange({bgcolor:v}) }
    render() {
        const {color ,bgcolor,bdcolor} = this.props;
        return <div style={{ height: "100px" }}>
            <div className="wea-cube-browser-single-tag-circle" style={{  float: "left" }}>
            <div className="cube-mode-tag" style={{
                    color: color,
                    background: bgcolor,
                    borderColor: bdcolor
                  }} >{getLabel(176, '标签')}</div>
            </div>
            <div className="cube-tag-set-container" >
                <div className="cube-tag-set-label">
                    <WeaColorPicker
                        customized={true}
                        onChange={this.colorChange}
                    >
                        <div className="set-label-left">{getLabel(500422, "文字颜色")}:</div>
                        <div className="cube-tag-set-btn" style={{ background: color }} title={getLabel(83749, '背景色')}>
                            <div className="cube-tag-set-btn-inner"></div>
                        </div>
                    </WeaColorPicker>
                </div>
                <div className="cube-tag-set-label">
                    <WeaColorPicker
                        customized={true}
                        onChange={this.bdColorChange}
                    >
                        <div className="set-label-left">{getLabel(500423, "边框颜色")}:</div>
                        <div className="cube-tag-set-btn" style={{ background: bdcolor }} title={getLabel(387943, '图标')+getLabel(495, "颜色")}>
                            <div className="cube-tag-set-btn-inner"></div>
                        </div>
                    </WeaColorPicker>
                </div>
                <div className="cube-tag-set-label">
                    <WeaColorPicker
                        customized={true}
                        onChange={this.bgColorChange}
                    >
                        <div className="set-label-left">{getLabel(500424, "背景颜色")}:</div>
                        <div className="cube-tag-set-btn" style={{ background: bgcolor }} title={getLabel(387943, '图标')+getLabel(495, "颜色")}>
                            <div className="cube-tag-set-btn-inner"></div>
                        </div>
                    </WeaColorPicker>
                </div>
            </div>
        </div>
    }
}

export default TagSet;